import {
  Button, Col, Divider, Form, Input,
  message,
  Modal, Row, Select,

} from 'antd';
import React, {useRef, useState} from 'react';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {pagination} from "@/utils/TableConfig";
import {PlusOutlined} from "@ant-design/icons";
import {getPageableData} from '@/utils/request';
import http from "../../../utils/request";
import GatewayConfig from "./gatewayConfig"
let api = 'api/extend/gateWay/';


export default () => {

  const actionRef = useRef();
  const [visible,setVisible] = useState(false);
  const [configVisible,setConfigVisible] = useState(false);
  const [config,setConfig] = useState();


  const [form] = Form.useForm();
  const columns = [
    {title: '描述', dataIndex: 'description'},
    {title: '网关地址', dataIndex: 'url'},
    {title: '加密代码', dataIndex: 'code',hideInSearch: true,},
    {title: '操作', dataIndex: 'option',hideInSearch: true,
      render(value, record){
        return (
          <>
            <a onClick={()=>{
              http.get(api + "delete?id=" + record.id).then(res => {
                if (!res.error) {
                  message.success("操作成功！")
                  actionRef.current.reload();
                }else{
                  message.error(res.message)
                }
              })
            }}>删除</a>
            <Divider type={"vertical"}/>
            <a onClick={()=>{
              form.resetFields();
              form.setFieldsValue(record)
              setVisible(true)
            }}>修改</a>
            <Divider type={"vertical"}/>
            <a onClick={()=>{
              setConfig(record)
              setConfigVisible(true)
            }}>配置修改</a>
          </>
        )
      }
    },
  ];

  const submit = () =>{

    form.validateFields().then(values => {
      if (!values.id){
        values.id = null
      }
      http.post(api + 'saveOrUpdate', values).then(res => {
        if (!res.error) {
          setVisible(false)
          message.success("操作成功！")
          actionRef.current.reload();
        }else{
          message.error(res.message)
        }
      })
    });
  }

  return (
    <PageHeaderWrapper>

      <ProTable
        actionRef={actionRef}
        request={(params, sort) => {
          return getPageableData(api + 'page', params , sort);
        }}
        bordered
        columns={columns}
        rowKey={"id"}
        pagination={pagination}
        scroll={{x:'max-content'}}
        toolBarRender={(action, {selectedRows}) => [
          <Button type="primary" size={"small"} onClick={() => {
            form.resetFields();
            setVisible(true)
          }}>
            <PlusOutlined/>新建配置
          </Button>
        ]}
      />

      <Modal
        title="编辑"
        visible={visible}
        width={"80%"}
        onOk={()=>submit()}
        onCancel={()=>setVisible(false)}>
        <Form
          form={form}
          className="ant-advanced-search-form"
        >
          <Form.Item label="id" name="id" hidden={true} labelCol={{span: 5}}
                     wrapperCol={{span: 18}}>
            <Input/>
          </Form.Item>
          <Form.Item label="描述" name="description" labelCol={{span: 5}}
                     wrapperCol={{span: 18}}  rules={[{required: true, message: '配置项为必填项!'}]}>
            <Input/>
          </Form.Item>
          <Form.Item label="网关地址" name="url" labelCol={{span: 5}}
                     wrapperCol={{span: 18}} rules={[{required: true, message: '配置项为必填项!'}]}>
            <Input/>
          </Form.Item>
          <Form.Item label="加密代码" name="code" labelCol={{span: 5}}
                     wrapperCol={{span: 18}} rules={[{required: true, message: '配置项为必填项!'}]}>
            <Input/>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="编辑"
        visible={configVisible}
        width={"80%"}
        onOk={()=>setConfigVisible(false)}
        onCancel={()=>setConfigVisible(false)}>
        <GatewayConfig baseConfig={config}/>
      </Modal>
    </PageHeaderWrapper>

  );
};

